<template>
  <div class="hot">
    <div class="hot-title">热门城市</div>
    <ul class="hot-list">
      <li class="hot-item" v-for="item in hotCityList" :key="item.id">
        {{ item.cityName }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["hotCityList"],
};
</script>
<style scoped>
.hot-title {
  font-size: 0.3rem;
  color: #212121;
  padding: 0.3rem;
}
.hot-list {
  position: relative;
  overflow: hidden;
  background: #fff;
  font-size: 0.28rem;
  color: #212121;
}
.hot-list::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 33.3333%;
  left: 33.3333%;
  border-left: 00.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}
.hot-item {
  width: 33.3333%;
  text-align: center;
  height: 0.9rem;
  line-height: 0.9rem;
  float: left;
  border-bottom: 0.02rem #ddd solid;
}
</style>
